<template>
	<view class="app">
		<view class="title">登录</view>
		<view class="logo">
			<image src="../../static/login/logo.png" mode="aspectFit"></image>
		</view>
		<view class="desc">
			<image src="../../static/login/desc.png"></image>
		</view>
		<view class="form">
			<view class="form_item">
				<image class="img1" src="../../static/login/phone.png"></image>
				<input class="inp1" placeholder-class="pl" type="number" v-model="phone" placeholder="请输入手机号码" />
			</view>
			<view class="form_item">
				<image class="img2" src="../../static/login/password.png"></image>
				<input class="inp2" password="true" placeholder-class="pl" type="text" v-model="password" placeholder="请输入密码" />
			</view>
		</view>
		<view style="padding-top: 76rpx;">
			<button class="btn" @click="userLogin()">登录</button>
		</view>
		<view style="position: relative;padding-top: 38rpx;text-align: right;">
			<image class="bottom_img" src="../../static/login/bottom_img.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				phone: '',
				password: '',
				backpage: '',
				backtype: ''
			}
		},
		onLoad(e) {
			this.backpage = e.backpage == undefined ? 'task' : e.backpage
			this.backtype = e.backtype == undefined ? 1 : e.backtype
		},
		methods: {
			...mapMutations(['login']),
			userLogin() {
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return false;
				}
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false;
				}
				let params = {
					_gp: 'app.rider',
					_mt: 'loginRider',
					phone: this.phone,
					password: this.password,
					ip: ''
				}
				let that = this
				that.request(params,null).then(res => {
					if (res.errno === 200) {
						that.login(res.data);
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1500
						})
						setTimeout(function() {
							that.loginBack(that.backpage, that.backtype)
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		text-align: center;
		padding-top: 74rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	.logo {
		text-align: center;
		padding-top: 72rpx;
	}

	.logo image {
		width: 172rpx;
		height: 172rpx;
	}

	.desc {
		text-align: center;
		padding-top: 48rpx;
	}

	.desc image {
		width: 284rpx;
		height: 46rpx;
	}

	.form {
		width: 618rpx;
		margin: 0 auto;
		padding-top: 32rpx;
	}

	.form_item {
		height: 156rpx;
		border-bottom: 2rpx solid #EFEFEF;
		position: relative;
	}

	.img1 {
		width: 36rpx;
		height: 40rpx;
		position: absolute;
		left: 26rpx;
		bottom: 28rpx;
	}

	.img2 {
		left: 26rpx;
		width: 36rpx;
		height: 40rpx;
		position: absolute;
		top: 58rpx;
	}

	.inp2 {
		width: 524rpx;
		height: 156rpx;
		line-height: 156rpx;
		display: inline-block;
		position: absolute;
		font-size: 30rpx;
		left: 96rpx;
	}

	.inp1 {
		width: 524rpx;
		display: inline-block;
		position: absolute;
		bottom: 0;
		height: 98rpx;
		left: 96rpx;
		/* color: #BBBBBB; */
		font-size: 30rpx;
		line-height: 98rpx;
	}

	.pl {
		color: #BBBBBB;
		font-size: 30rpx;
	}

	.btn {
		width: 640rpx;
		height: 96rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #5095F4, #3662DD);
		font-size: 32rpx;
		border-radius: 8rpx;
		margin: 0 auto;
	}

	.bottom_img {
		width: 738rpx;
		height: 314rpx;
	}
</style>
